<template>
	<view class="cartContainer">
		<scroll-view class="cartScroll" scroll-y="true">
			<view>
				<!-- 登陆 -->
				<view v-if="!usreInfo.nickName" class="login">
					<image class="login_img login_item" src="../../static/images/cart/cart.png"></image>
					<text class="login_text login_item">登录后才能看到商品哦~</text>
					<view class="login_btn login_item" @click="toLogin">立即登陆</view>
				</view>
				<!-- 登录成功购物车展示列表 -->
				<view v-else class="cart">
					<view class="cart_item" v-for="(item, index) in productItems" :key="item.gid" @longpress="removeGoods(index)">
						<view class="icon_wrap">
							<image
								v-show="item.isChecked"
								@click="changeOneChecked(item)"
								class="icon_img"
								src="../../static/images/cart/icon_checkbox_check_red.png"
								mode=""
							></image>
							<image
								v-show="!item.isChecked"
								@click="changeOneChecked(item)"
								class="icon_img"
								src="../../static/images/cart/icon_checkbox_uncheck_darkgray.png"
								mode=""
							></image>
						</view>
						<image class="cart_item_img" :src="item.imageUrl" mode=""></image>
						<view class="cart_goods">
							<text class="cart_goods_name">{{ item.productName }}</text>
							<view class="priceAndNum">
								<text class="price">￥{{ item.properties.addedCartPrice }}</text>
								<view class="numWrpa">
									<view class="sub" :class="{ noSub: item.count === 1 || item.count === '1' || item.count === '' }" @click="changeNum(item, -1)">-</view>
									<input class="num" @blur="changeNum(item, item.count, true)" type="number" v-model="item.count" />
									<view class="add" @click="changeNum(item, 1)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 为你推荐显示条 -->
				<view class="recommendBar">
					<image class="recommendBar_img" src="../../static/images/cart/recheader_left.png"></image>
					<text class="recommendBar_text">为你推荐</text>
					<image class="recommendBar_img" src="../../static/images/cart/recheader_right.png"></image>
				</view>

				<!-- 推荐列表 -->
				<view class="recommendList">
					<view class="goods" v-for="(goods, index) in recommendList" :key="index">
						<view class="img_wrap">
							<image class="goods_img" :src="goods.data.goods.img800"></image>
							<view class="des_wrap">
								<text
									v-if="goods.data.goods.labels[0].text === 'HOT' || goods.data.goods.labels[1].text === 'HOT' || goods.data.goods.labels[2].text === 'HOT'"
									class="hot des_wrap_item"
								>
									HOT
								</text>
								<image
									v-if="goods.data.goods.labels[0].text === '特价' || goods.data.goods.labels[1].text === '特价' || goods.data.goods.labels[2].text === '特价'"
									class="des_wrap_img des_wrap_item"
									src="../../static/images/cart/special_offer.png"
									mode=""
								></image>
							</view>
						</view>
						<text class="goods_title goods_text">{{ goods.data.goods.name }}</text>
						<text class="goods_des goods_text">{{ goods.data.goods.summary }}</text>
						<view class="goods_price goods_text">
							<view class="left_price">
								￥
								<text class="current_price ">{{ goods.data.goods.priceInfo.singlePrice.price / 100 || goods.data.goods.priceMin / 100 }}</text>

								<text v-if="goods.data.goods.priceInfo.singlePrice">起</text>
							</view>

							<text class="right_price">￥{{ goods.data.goods.marketPrice / 100 }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 合计 -->
		<view class="total">
			<view class="checkedAll">
				<image v-show="!isCheckedAll" @click="checkAllorNo(true)" class="icon_img" src="../../static/images/cart/icon_checkbox_uncheck_darkgray.png"></image>
				<image v-show="isCheckedAll" @click="checkAllorNo(false)" class="icon_img" src="../../static/images/cart/icon_checkbox_check_red.png"></image>
				<text class="checkedAll_text">全选</text>
			</view>

			<view class="total_price">
				<view class="price">
					<text class="price_text">合计 :</text>
					<text class="money">￥{{ totalPrice }}</text>
				</view>
				<view class="btn">结算({{ totalNum }})</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			usreInfo:{}
		};
	},
	computed: {
		...mapGetters(['recommendList', 'productItems']),
		//是否全选
		isCheckedAll() {
			return this.productItems.every(item => {
				return item.isChecked;
			}) && this.productItems.length!==0;
		},
		// 总价格
		totalPrice() {
			return this.productItems.reduce((pre, item) => {
				if (item.isChecked) {
					pre += item.properties.addedCartPrice * item.count;
				}
				return pre;
			}, 0);
		},
		// 总数量
		totalNum() {
			return this.productItems.reduce((pre, item) => {
				if (item.isChecked) {
					pre += +item.count;
				}
				return pre;
			}, 0);
		}
	},
	mounted() {
		this.getRecommendList();
		this.getProductItems();
		// console.log(this);
	},
	methods: {
		getRecommendList() {
			this.$store.dispatch('getRecommendList');
		},
		// 去到登陆页面
		toLogin() {
			wx.navigateTo({
				url: `/pages/login/login?redirect=${this.__route__}`
				// url:`/pages/login/login?redirect=pages/center/center`
			});
		},
		// 获取购物车信息
		async getProductItems() {
			const result = await wx.getStorageSync('userInfo');
			this.usreInfo = result
			//  如果productItems没有数据的话 发送请求拿一次，避免之后与商品详情页的productItems拿取不是同一个
			if (this.productItems.length < 1) {

				// 用户存在在拿去购物车信息
				if (result.nickName) {
					this.$store.dispatch('getProductItems');
				}
			}
		},
		//改变单个商品的选中状态
		changeOneChecked(goods) {
			goods.isChecked = !goods.isChecked;
		},
		//全选全不选
		checkAllorNo(flag) {
			this.productItems.forEach(item => {
				if (item.isChecked !== flag) {
					item.isChecked = flag;
				}
			});
		},
		// 改变单个商品数量
		changeNum(item, disNum, flag) {
			// 先把保存的值变为数字类型
			item.count = +item.count;
			// flag是input是去焦点时传递的true
			//这里是专门助力input输入的值
			if (flag) {
				// input输入值变为数字类型
				disNum = +disNum;
				console.log(disNum, typeof disNum);
				// input 输入的不是数字的话
				if (disNum + 2 !== disNum + 2) {
					disNum = 1;
				} else {
					if (disNum < 1) {
						disNum = 1;
					}
				}
				return (item.count = disNum);
			}

			let newCount = item.count + disNum;
			if (newCount < 1) {
				newCount = 1;
			}
			item.count = newCount;
		},

		// 长按删除购物车商品
		removeGoods(index) {
			wx.showModal({
				// title: '提示',
				content: '确定要删除这个商品吗？',
				success: res => {
					if (res.confirm) {
						this.$store.commit('REMOVE_ONE_PRODUCTITEMS', index);
					} else if (res.cancel) {
						// console.log('用户点击取消')
					}
				}
			});
		}
	},
	// 上拉触底刷新
	onReachBottom() {
		if (this.recommendList.length < 50) {
			this.$store.commit('ADD_RECOMMENDLIST', this.recommendList.slice(0, 5));
		}
	}
};
</script>

<style lang="scss">
.cartContainer {
	position: relative;
	height: 100%;
	background-color: #f4f4f4;
	.cartScroll {
		height: 100%;
		//登陆
		.login {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			padding: 80rpx 0;
			// background-color: skyblue;
			.login_item {
				margin-top: 28rpx;
			}
			.login_img {
				width: 180rpx;
				height: 180rpx;
			}
			.login_text {
				color: #666666;
				font-size: 28rpx;
			}
			.login_btn {
				width: 164rpx;
				height: 72rpx;
				text-align: center;
				line-height: 72rpx;
				border-radius: 32rpx;
				border: 2rpx solid rgb(102, 102, 102);
				font-size: 26rpx;
				color: #666666;
			}
		}

		//购物车列表
		.cart {
			margin: 20rpx;
			// height: 400rpx;
			border-radius: 18rpx;
			// background-color: pink;
			background-color: #ffffff;
			padding: 20rpx;

			padding-bottom: 1rpx;
			.cart_item {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 192rpx;
				// background-color: skyblue;
				margin-bottom: 20rpx;
				.icon_wrap {
					.icon_img {
						height: 36rpx;
						width: 36rpx;
					}
				}
				.cart_item_img {
					height: 172rpx;
					width: 172rpx;
				}
				.cart_goods {
					width: 417rpx;
					display: flex;
					flex-direction: column;
					// align-items: center;
					.cart_goods_name {
						font-size: 28rpx;
						color: #333333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2; /* * 多行文本溢出... */
						overflow: hidden;
					}
					.priceAndNum {
						width: 100%;
						display: flex;
						justify-content: space-between;
						// background-color: greenyellow;
						margin-top: 20rpx;
						.price {
							font-size: 30rpx;
							color: #bf1111;
						}
						.numWrpa {
							// width: 152rpx;

							display: flex;
							.num {
								background-color: #f4f4f4;
								width: 52rpx;
								height: 40rpx;
								text-align: center;
								margin: 0 10rpx;
							}
							.sub,
							.add {
								// display: block;
								// color: red;
								width: 40rpx;
								// background-color: red;
								color: rgb(0, 0, 0);
								height: 40rpx;
								font-size: 35rpx;
								text-align: center;
								line-height: 40rpx;
							}
							.noSub {
								color: rgba(0, 0, 0, 0.1);
							}
						}
					}
				}
			}
		}
		// 为你推荐显示条
		.recommendBar {
			height: 84rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			// background-color: pink;
			margin: 20rpx 0;
			.recommendBar_img {
				height: 36rpx;
				width: 36rpx;
			}
			.recommendBar_text {
				padding: 0 20rpx;
				color: #333333;
				font-weight: bold;
				font-size: 30rpx;
			}
		}

		// 推荐商品列表
		.recommendList {
			padding: 0 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			// background-color: greenyellow;
			justify-content: space-between;
			.goods {
				height: 542rpx;
				width: 344rpx;
				background-color: #ffffff;
				display: flex;
				flex-direction: column;
				border-radius: 16rpx;
				overflow: hidden;
				margin: 10rpx 0;
				.goods_text {
					padding: 0 10rpx;
				}
				.img_wrap {
					position: relative;
					.goods_img {
						width: 344rpx;
						height: 344rpx;
					}
					.des_wrap {
						position: absolute;
						left: 0;
						bottom: 10rpx;
						display: flex;
						align-items: center;
						.des_wrap_item {
							margin-right: 10rpx;
						}
						.hot {
							background-color: rgb(242, 179, 100);
							color: #ffffff;
							font-size: 24rpx;
							border-radius: 8rpx;
							text-align: center;
							height: 32rpx;
							// line-height: 32rpx;
						}
						.des_wrap_img {
							width: 60rpx;
							height: 32rpx;
						}
					}
				}

				.goods_title {
					color: #333333;
					font-size: 30rpx;
					margin-top: 10rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1; /* * 多行文本溢出... */
					overflow: hidden;
				}
				.goods_des {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1; /* * 多行文本溢出... */
					overflow: hidden;
					color: #999999;
					font-size: 26rpx;
					margin: 10rpx 0;
				}

				.goods_price {
					display: flex;
					height: 24rpx;
					align-items: flex-end;
					margin-top: 30rpx;
					.left_price {
						color: rgb(250, 79, 11);
						font-size: 24rpx;
						.current_price {
							font-size: 32rpx;
						}
					}
					.right_price {
						color: #999999;
						font-size: 24rpx;
						text-decoration-line: line-through;
					}
				}
			}
		}
	}
	// 合计总共
	.total {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 108rpx;
		background-color: #ffffff;
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.checkedAll {
			display: flex;
			align-items: center;
			.icon_img {
				width: 36rpx;
				height: 36rpx;
			}
			.checkedAll_text {
				font-size: 26rpx;
				color: #333333;
				margin-left: 10rpx;
			}
		}
		.total_price {
			// background-color: skyblue;
			height: 100%;
			width: 100rpx;
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.price {
				display: flex;
				align-items: center;
				.price_text {
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.9);
				}
				.money {
					font-size: 32rpx;
					color: #bf1111;
					margin: 2rpx 8rpx 0 10rpx;
				}
			}
			.btn {
				width: 192rpx;
				height: 76rpx;
				background: linear-gradient(to right, rgb(240, 78, 46), rgb(213, 16, 16));
				color: #ffffff;
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				line-height: 76rpx;
				border-radius: 38rpx;
			}
		}
	}
}
</style>
